<template>
  <div id="content">
      <div id="map" ref="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { defaults as defaultControls } from "ol/control";
import Tile from "ol/layer/Tile";
import { fromLonLat } from "ol/proj";
import OSM from "ol/source/OSM";

export default {
  name: "tree",
  data() {
      return {
          map: null
      };
  },
  methods: {
      /**
       * 初始化一个 openlayers 地图
       */
      initMap() {
          let target = "map"; //跟页面元素的 id 绑定来进行渲染
          let tileLayer = [
              new Tile({
                  source: new OSM()
              })
          ];
          let view = new View({
            // projection: "EPSG:3857", //使用这个坐标系，默认为 3857,可以不写
              center: fromLonLat([104.912777, 34.730746]), //地图中心坐标 // 数据格式4326转为3857
              zoom: 4.5 //缩放级别
          });
          this.map = new Map({
              target: target, //绑定dom元素进行渲染
              layers: tileLayer, //配置地图数据源
              view: view //配置地图显示的options配置（坐标系，中心点，缩放级别等）
          });
      }
  },
  mounted() {
      this.initMap();
  }
};
</script>
<style lang="scss" scoped>
</style>